<template>
  <div>
    <div class="singerInfo">
      <img :src="singerHeaderInfo.cover" alt width="200" height="200" />
      <div class="singer">
        <div>{{singerHeaderInfo.name}}</div>
        <span>单曲数:{{singerHeaderInfo.musicSize}}</span>
        <span>专辑数:{{singerHeaderInfo.albumSize}}</span>
        <span>MV数:{{singerHeaderInfo.mvSize}}</span>
        <div>标签:{{singerHeaderInfo.imageDesc}}</div>
        <div>简介:{{singerHeaderInfo.briefDesc}}</div>
        <!-- <div>{{singerHeaderInfo.briefDesc}}</div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from '@/http.ts'
onMounted(() => {
  getSingerInfo()
})
const route = useRoute()
const singerHeaderInfo = ref({})
const getSingerInfo = () => {
  const { id } = route.params
  axios
    .get('/artist/detail', {
      params: {
        id
      }
    })
    .then(res => {
      console.log(res)
      const { data } = res.data
      singerHeaderInfo.value = { ...data, ...data.artist, ...data.identify }
    })
}
</script>

<style scoped lang="less">
.singerInfo {
  display: flex;
  color: #b2b2b2;
  img {
    border-radius: 5px;
    margin-right: 20px;
    width: 200px;
    height: 200px;
  }
  .singer {
    div:nth-child(1) {
      font-size: 21px;
      font-weight: bold;
    }
    div:nth-child(5) {
      font-size: 13px;
    }
    div:nth-child(6) {
      margin-top: 20px;
      height: 95px;
      width: 600px;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
    }
    span {
      margin: 14px 16px 8px 0;
      line-height: 40px;
      font-size: 13px;
    }
  }
}
</style>